<template>
  <div class="content-contanier" v-if="contentJSON">
    <div class="flexbox">
      <div style="padding:20px;background:#e6a23c47">
        <p class="number font20">{{contentJSON.patientName||'-'}}</p>
        <p class="text font14">出生日期:{{contentJSON.birthTime||'-'}} {{contentJSON.sex}}</p>
        <p class="text font14">{{contentJSON.age}} {{contentJSON.marital}} {{contentJSON.telecom}}</p>
        <p>{{contentJSON.idCard}}</p>
      </div>
      <div style="padding:20px;max-width:50%">
        <p class="number font24">{{contentJSON.title||'-'}}</p>
        <p class="text font12">{{contentJSON.effectiveTime||'-'}} 编号:{{contentJSON.templateId||'-'}}</p>
        <p class="text font12">文档流水号:{{contentJSON.id||'-'}}</p>
        <p
          class="text font12"
        >保管机构名称:{{contentJSON.custodian||'-'}} {{contentJSON.org?'病区:'+contentJSON.org:''}}</p>
        <p class="text font12">
          <span
            v-if="contentJSON.legalAuthenticator"
            class="mrgr5"
          >主治医师:{{contentJSON.legalAuthenticator||'-'}}</span>
          <span
            v-for="(item,index) of contentJSON.authenticator"
            :key="index"
            class="mrgr5"
          >{{item.assignedEntity.code._displayName}}:{{item.assignedEntity.assignedPerson?item.assignedEntity.assignedPerson.name||'-':item.assignedEntity.representedOrganization?item.assignedEntity.representedOrganization.asOrganizationPartOf.wholeOrganization.asOrganizationPartOf.wholeOrganization.name:'-'}}</span>
        </p>
      </div>
      <div style="padding:20px;width:240px" v-if="contentJSON.providerOrganization">
        <p class="text font12">讨论地点:{{contentJSON.providerOrganization.addr||'-'}}</p>
        <p
          class="text font12"
        >讨论日期:{{$utils.getDateBy8Site(contentJSON.providerOrganization.time)||'-'}}</p>
        <p class="text font12">参加讨论人员名单:{{contentJSON.providerOrganization.participant||'-'}}</p>
      </div>
    </div>
    <div
      class="target-info-left-content"
      v-if="contentJSON.titleList&&contentJSON.titleList.length > 0"
    >
      <div v-for="(item,index) of contentJSON.titleList" :key="index">
        <p class="number font16 title">{{item.section.code._displayName}}</p>
        <item-list :itemList="item.itemList" v-if="item.itemList&&item.itemList.length>0"></item-list>
        <div v-else class="param-name font13">-</div>
        <!-- <div v-for="(listItem,j) of item.itemList" :key="j" class="flexbox content-div">
          <div
            class="param-name font13"
            v-if="listItem.observation&&listItem.observation.value"
          >{{(listItem.observation.code?listItem.observation.code._displayName:'')||listItem.observation.value._codeSystemName}}</div>
          <div
            class="param-value hidden font13"
            v-if="listItem.observation&&listItem.observation.value"
            :title="listItem.observation.value._displayName||listItem.observation.value.__text||listItem.observation.value._value||'-'"
          >{{listItem.observation.value['_xsi:type']=='TS'?getDate(listItem.observation.value._displayName||listItem.observation.value.__text||listItem.observation.value._value)||'-':listItem.observation.value['_xsi:type']=='CD'?listItem.observation.value._code+'('+listItem.observation.value._displayName+')':(listItem.observation.value._displayName||listItem.observation.value.__text||listItem.observation.value._value||'-')}} {{listItem.observation.value._currency||listItem.observation.value._unit}}</div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import x2js from 'x2js'
// import content from './content.json'
export default {
  name: 'testform',
  components: {
    'item-list': {
      name: 'item-list',
      props: ['itemList'],
      data: function() {
        return {}
      },
      template: `
      <div style="width:100%;">
       <div v-for="(listItem,j) of itemList" :key="j" style="width:100%">
       <div class="content-div flexbox" v-if="listItem.observation&&listItem.observation.value">
            <div
              class="param-name font13"
            >{{(listItem.observation.code?listItem.observation.code._displayName:'')||listItem.observation.value._codeSystemName||(listItem.observation.participant?listItem.observation.participant.participantRole.playingEntity.code._displayName:'')}}</div>
            <div
              class="param-value hidden font13"
              v-if="listItem.observation&&listItem.observation.value"
            >{{listItem.observation.value['_xsi:type']=='TS'?$utils.getDateBy8Site(listItem.observation.value._displayName||listItem.observation.value.__text||listItem.observation.value._value)||'-':listItem.observation.value['_xsi:type']=='CD'?listItem.observation.value._code+'('+listItem.observation.value._displayName+')':(listItem.observation.value._displayName||listItem.observation.value.__text||listItem.observation.value._value||'-')}} {{listItem.observation.value._currency||listItem.observation.value._unit}}</div>
         </div>
          <div class="content-div flexbox" v-else-if="listItem.participantRole&&listItem.participantRole.code">
            <div
              class="param-name font13"
            >{{(listItem.participantRole.code?listItem.participantRole.code._displayName:'')}}</div>
            <div
              class="param-value hidden font13"
              v-if="listItem.participantRole&&listItem.participantRole.playingEntity"
            >{{listItem.participantRole.playingEntity.name || '-'}}</div>
         </div>
         <div v-else-if="listItem.itemList==0&&listItem.observation&&listItem.observation.author">-</div>
         <item-list :itemList="listItem.itemList" v-if="listItem.itemList&&listItem.itemList.length>0"></item-list>
        </div>
        </div>
      `
    }
  },
  data: function() {
    return {
      contentJSON: {}
    }
  },
  created() {},
  mounted() {
    //
    let _this = this
    this.$api.get('/content.xml').then(function(data) {
      let content = new x2js().xml2js(data)
      console.log(content)
      _this.initContent(content)
    })
  },
  methods: {
    // 初始化内容
    initContent(content) {
      try {
        this.contentJSON = {
          patientName:
            content.ClinicalDocument.recordTarget.patientRole.patient.name ||
            '-', // 患者姓名
          birthTime: content.ClinicalDocument.recordTarget.patientRole.patient
            .birthTime
            ? this.$utils.getDateBy8Site(
                content.ClinicalDocument.recordTarget.patientRole.patient
                  .birthTime._value
              )
            : '', // 出生日期
          marital: content.ClinicalDocument.recordTarget.patientRole.patient
            .maritalStatusCode
            ? content.ClinicalDocument.recordTarget.patientRole.patient
                .maritalStatusCode._displayName
            : '', // 婚姻状态
          age: content.ClinicalDocument.recordTarget.patientRole.patient.age
            ? content.ClinicalDocument.recordTarget.patientRole.patient.age
                ._value +
              content.ClinicalDocument.recordTarget.patientRole.patient.age
                ._unit
            : '', //年龄
          sex: content.ClinicalDocument.recordTarget.patientRole.patient
            .administrativeGenderCode
            ? content.ClinicalDocument.recordTarget.patientRole.patient
                .administrativeGenderCode._displayName
            : '', // 性别
          idCard: content.ClinicalDocument.recordTarget.patientRole.patient.id
            ? content.ClinicalDocument.recordTarget.patientRole.patient.id
                ._extension
            : '', // 卡号
          id: content.ClinicalDocument.id._extension,
          templateId: content.ClinicalDocument.templateId._root,
          custodian:
            content.ClinicalDocument.custodian.assignedCustodian
              .representedCustodianOrganization.name,
          telecom: content.ClinicalDocument.recordTarget.patientRole.telecom
            ? content.ClinicalDocument.recordTarget.patientRole.telecom._value
            : '', // 患者联系方式
          title: content.ClinicalDocument.title, // 文档标题
          org: content.ClinicalDocument.componentOf&&content.ClinicalDocument.componentOf.encompassingEncounter&&content.ClinicalDocument.componentOf.encompassingEncounter.location
            ? this.getSelfOrg(
                content.ClinicalDocument.componentOf.encompassingEncounter
                  .location.healthCareFacility.serviceProviderOrganization
              )
            : '',
          effectiveTime: this.$utils.getDateBy8Site(
            content.ClinicalDocument.effectiveTime._value
          ), // 文档生成日期
          legalAuthenticator: content.ClinicalDocument.legalAuthenticator
            ? content.ClinicalDocument.legalAuthenticator.assignedEntity
                .assignedPerson.name
            : ''
        }
        if (content.ClinicalDocument.participant) {
          // 会议参与
          this.contentJSON.providerOrganization = {
            participant:content.ClinicalDocument.participant.associatedEntity&&content.ClinicalDocument.participant.associatedEntity
                .associatedPerson?
              content.ClinicalDocument.participant.associatedEntity
                .associatedPerson.name:'',
            addr: content.ClinicalDocument.recordTarget.patientRole.addr
              ? content.ClinicalDocument.recordTarget.patientRole.addr
                  .houseNumber
              : (content.ClinicalDocument.recordTarget.patientRole
                  .providerOrganization?content.ClinicalDocument.recordTarget.patientRole
                  .providerOrganization.asOrganizationPartOf.wholeOrganization
                  .addr:''),
            time: content.ClinicalDocument.recordTarget.patientRole
              .providerOrganization&&content.ClinicalDocument.recordTarget.patientRole
              .providerOrganization.asOrganizationPartOf
              ? content.ClinicalDocument.recordTarget.patientRole
                  .providerOrganization.asOrganizationPartOf.effectiveTime
                  ._value
              : ''
          }
        }
        this.contentJSON.authenticator = content.ClinicalDocument.authenticator
          ? Array.isArray(content.ClinicalDocument.authenticator)
            ? content.ClinicalDocument.authenticator
            : [content.ClinicalDocument.authenticator]
          : []
        console.log('authenticator:', this.contentJSON.authenticator)
      } catch (error) {
        console.log(error)
      }

      let component =
        content.ClinicalDocument.component.structuredBody.component
      if (!Array.isArray(component)) {
        // 非数组 转成数组
        component = [component]
      }
      this.contentJSON.titleList = this.setTitleList(component)
      console.log(this.contentJSON)
    },
    //递归获取机构
    getSelfOrg(serviceProviderOrganization, orgString) {
      let org = serviceProviderOrganization.asOrganizationPartOf
      return !org
        ? serviceProviderOrganization.name + ' ' + orgString
        : this.getSelfOrg(
            org.wholeOrganization,
            serviceProviderOrganization.name
          )
    },
    // 递归获取子类list
    setTitleList(list) {
      for (let i = 0; i < list.length; i++) {
        let item = list[i]
        item.itemList =
          item.section && item.section.entry
            ? item.section.entry.organizer
              ? item.section.entry.organizer.component
              : item.section.entry
            : item.organizer && item.organizer.component
            ? item.organizer.component
            : []
        item.itemList = item.itemList
          ? Array.isArray(item.itemList)
            ? [...item.itemList]
            : [item.itemList]
          : []
        if (item.observation && item.observation.participant) {
          let participantItem = item.observation.participant
          if (!Array.isArray(participantItem)) {
            participantItem = [participantItem]
          }
          item.itemList = item.itemList.concat(participantItem)
        }
        if (item.procedure && item.procedure.entryRelationship) {
          // 关联内容
          let relationItem = item.procedure.entryRelationship
          if (!Array.isArray(relationItem)) {
            relationItem = [relationItem]
          }
          item.itemList = item.itemList.concat(relationItem) // 将附属的节点加入在父节点后
        }
        if (item.observation && item.observation.entryRelationship) {
          // 关联内容
          let relationItem = item.observation.entryRelationship
          if (!Array.isArray(relationItem)) {
            relationItem = [relationItem]
          }
          item.itemList = item.itemList.concat(relationItem) // 将附属的节点加入在父节点后
        }
        if (item.act && item.act.entryRelationship) {
          // 关联内容
          let relationItem = item.act.entryRelationship
          if (!Array.isArray(relationItem)) {
            relationItem = [relationItem]
          }
          item.itemList = item.itemList.concat(relationItem) // 将附属的节点加入在父节点后
        }

        if (item.itemList && item.itemList.length > 0) {
          // 寻找下一层
          item.itemList = this.setTitleList([...item.itemList])
        }
      }
      return list
    },
    setItemList(itemList, item) {
      
      if (item.observation && item.observation.entryRelationship) {
        let relationItem = item.observation.entryRelationship
        if (!Array.isArray(relationItem)) {
          relationItem = [relationItem]
        }
        return relationItem
        // itemList.splice(i + 1, 0, ...relationItem) // 将附属的节点加入在父节点后
        // i += relationItem.length
      }
      return null
    }
  }
}
</script>
<style scoped lang="scss">
.content-contanier {
  height: calc(100% - 40px);
  padding: 20px 50px 50px 50px;
  background: white;
}
.target-info-left-content {
  height: calc(100% - 150px);
  overflow: hidden;
  overflow-y: auto;
  padding: 0 15px 50px 5px;
  .title {
    background: #eee;
    padding: 3px 5px;
    margin: 5px 0;
  }
  p {
    line-height: 30px;
  }
  /deep/.content-div {
    line-height: 30px;
    width: 100%;
    font-size: 12px;
    // li {
    //   width: 100%;
    //   float: left;
    //   display: flex;
    .param-name {
      width: 20%;
      color: #888;
      text-align: left;
    }
    .param-value {
      text-indent: 1em;
      width: calc(80% - 50px);
      color: #333;
    }
    // }
  }
}
</style>
